import React, { Component } from 'react';

import './index.scss';

class SelectTableCon extends Component {
  constructor (props) {
    super(props);

    this.state = {
      listShow: false,
      selectValue: ''
    }
  }

  componentDidMount () {
    this.setState({
      selectValue: this.props.defaultValue
    })
  }

  showList () {
    this.setState ({
      listShow: !this.state.listShow
    })
  }

  onSelectChange (data, selectIdx, cid) {
    const { onSelectChange } = this.props;
    this.setState ({
      listShow: false,
      selectValue: data.title
    })
    onSelectChange(data, selectIdx, cid);
  }

  render() {
    const { fieldData, selectIdx, cid } = this.props;
    const { listShow, selectValue } = this.state;

    return (
      <div className="table-select">
        <i className="iconfont iconarrow-down"></i>
        <div className="value-show"
          onClick = { () => this.showList.apply(this) }>
            { selectValue }
          </div>
          <ul className= { ["option-list", listShow ? 'show': ''].join(' ') }>
            <li
            className="option-item"
            onClick = { this.onSelectChange.bind(this, {id: 0, title: '无分类'}, selectIdx, cid) }>
            无分类
            </li>
            {
              fieldData.map((item, index) => {
                return (
                  <li 
                    className="option-item"
                    key={index}
                    onClick = { this.onSelectChange.bind(this, item, selectIdx, cid) }>
                    { item.title }
                  </li>
                );
              })
            }
          </ul>
      </div>
    )
  }
}

export default SelectTableCon;